<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店汇率转换</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .currency-card {
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .currency-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        }
        .currency-flag {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 10px;
            object-fit: cover;
        }
        .currency-input {
            font-size: 1.5rem;
            font-weight: bold;
            border: none;
            background: transparent;
            text-align: right;
        }
        .currency-input:focus {
            outline: none;
            box-shadow: none;
        }
        .swap-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            background-color: #f8f9fa;
            border: 2px solid #dee2e6;
            color: #0d6efd;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        .swap-btn:hover {
            background-color: #0d6efd;
            color: white;
            border-color: #0d6efd;
        }
        .rate-info {
            font-size: 0.9rem;
            color: #6c757d;
        }
        .calculating {
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        /* 删除计算覆盖层相关样式 */
        .history-item {
            border-left: 3px solid #0d6efd;
            padding-left: 15px;
            margin-bottom: 15px;
        }
        .favorite-currency {
            cursor: pointer;
            transition: all 0.2s;
        }
        .favorite-currency:hover {
            background-color: #f8f9fa;
        }
        /* 添加内联计算指示器样式 */
        .calculation-indicator {
            display: inline-flex;
            align-items: center;
            margin-left: 10px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .calculation-indicator.active {
            opacity: 1;
        }
        .calculation-indicator .spinner-border {
            width: 1rem;
            height: 1rem;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>酒店汇率转换</h2>
            <div>
                <button class="btn btn-outline-secondary me-2" id="historyBtn">
                    <i class="bi bi-clock-history"></i> 历史记录
                </button>
                <button class="btn btn-primary" id="settingsBtn">
                    <i class="bi bi-gear"></i> 设置
                </button>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-8">
                <!-- 源货币卡片 -->
                <div class="card currency-card mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex align-items-center">
                                <img src="assets/flags/cny.png" alt="CNY" class="currency-flag" id="fromFlag">
                                <div>
                                    <h5 class="mb-0" id="fromCurrencyName">人民币</h5>
                                    <small class="text-muted" id="fromCurrencyCode">CNY</small>
                                </div>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="fromCurrencyDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    选择货币
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="fromCurrencyDropdown">
                                    <li><a class="dropdown-item" href="#" data-currency="CNY" data-name="人民币">人民币 (CNY)</a></li>
                                    <li><a class="dropdown-item" href="#" data-currency="USD" data-name="美元">美元 (USD)</a></li>
                                    <li><a class="dropdown-item" href="#" data-currency="EUR" data-name="欧元">欧元 (EUR)</a></li>
                                    <li><a class="dropdown-item" href="#" data-currency="JPY" data-name="日元">日元 (JPY)</a></li>
                                    <li><a class="dropdown-item" href="#" data-currency="GBP" data-name="英镑">英镑 (GBP)</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#allCurrenciesModal">查看所有货币</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="input-group">
                            <span class="input-group-text" id="fromCurrencySymbol">¥</span>
                            <input type="text" class="form-control currency-input" id="fromAmount" value="100.00" aria-label="金额">
                        </div>
                    </div>
                </div>

                <!-- 交换按钮 -->
                <div class="swap-btn mb-4" id="swapBtn">
                    <i class="bi bi-arrow-down-up"></i>
                </div>

                <!-- 目标货币卡片 -->
                <div class="card currency-card mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex align-items-center">
                                <img src="assets/flags/usd.png" alt="USD" class="currency-flag" id="toFlag">
                                <div>
                                    <h5 class="mb-0" id="toCurrencyName">美元</h5>
                                    <small class="text-muted" id="toCurrencyCode">USD</small>
                                </div>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="toCurrencyDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    选择货币
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="toCurrencyDropdown">
                                    <li><a class="dropdown-item" href="#" data-currency="CNY" data-name="人民币">人民币 (CNY)</a></li>
                                    <li><a class="dropdown-item" href="#" data-currency="USD" data-name="美元">美元 (USD)</a></li>
                                    <li><a class="dropdown-item" href="#" data-currency="EUR" data-name="欧元">欧元 (EUR)</a></li>
                                    <li><a class="dropdown-item" href="#" data-currency="JPY" data-name="日元">日元 (JPY)</a></li>
                                    <li><a class="dropdown-item" href="#" data-currency="GBP" data-name="英镑">英镑 (GBP)</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#allCurrenciesModal">查看所有货币</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="input-group">
                            <span class="input-group-text" id="toCurrencySymbol">$</span>
                            <input type="text" class="form-control currency-input" id="toAmount" value="14.39" aria-label="金额" readonly>
                            <!-- 添加内联计算指示器 -->
                            <div class="calculation-indicator" id="calculationIndicator">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">计算中...</span>
                                </div>
                                <small>计算中</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 汇率信息 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="mb-0 rate-info">
                                    <span id="rateInfo">1 CNY = 0.1439 USD</span>
                                    <span class="ms-2 text-success" id="rateChange">+0.05%</span>
                                </p>
                                <small class="text-muted">最后更新: <span id="lastUpdate">2023-06-15 14:30</span></small>
                            </div>
                            <button class="btn btn-sm btn-outline-primary" id="refreshRateBtn">
                                <i class="bi bi-arrow-repeat"></i> 刷新汇率
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 常用货币 -->
                <div class="card">
                    <div class="card-header">
                        常用货币
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <div class="favorite-currency p-2 rounded d-flex align-items-center" data-currency="EUR" data-name="欧元">
                                    <img src="assets/flags/eur.png" alt="EUR" class="currency-flag">
                                    <div>
                                        <div>欧元 (EUR)</div>
                                        <small class="text-muted">1 CNY = 0.1328 EUR</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="favorite-currency p-2 rounded d-flex align-items-center" data-currency="JPY" data-name="日元">
                                    <img src="assets/flags/jpy.png" alt="JPY" class="currency-flag">
                                    <div>
                                        <div>日元 (JPY)</div>
                                        <small class="text-muted">1 CNY = 20.54 JPY</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="favorite-currency p-2 rounded d-flex align-items-center" data-currency="GBP" data-name="英镑">
                                    <img src="assets/flags/gbp.png" alt="GBP" class="currency-flag">
                                    <div>
                                        <div>英镑 (GBP)</div>
                                        <small class="text-muted">1 CNY = 0.1132 GBP</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 计算中覆盖层 -->
    <div class="calculation-overlay" id="calculationOverlay">
        <div class="spinner-container">
            <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                <span class="visually-hidden">计算中...</span>
            </div>
            <h4>正在计算汇率...</h4>
            <p class="text-muted">获取最新汇率数据</p>
        </div>
    </div>

    <!-- 历史记录模态框 -->
    <div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="historyModalLabel">汇率转换历史记录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="history-item">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6>100 CNY → 14.39 USD</h6>
                                <small class="text-muted">2023-06-15 14:30</small>
                            </div>
                            <button class="btn btn-sm btn-outline-primary">重复</button>
                        </div>
                    </div>
                    <div class="history-item">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6>200 USD → 1,390.20 CNY</h6>
                                <small class="text-muted">2023-06-15 13:45</small>
                            </div>
                            <button class="btn btn-sm btn-outline-primary">重复</button>
                        </div>
                    </div>
                    <div class="history-item">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6>50 EUR → 390.06 CNY</h6>
                                <small class="text-muted">2023-06-15 10:20</small>
                            </div>
                            <button class="btn btn-sm btn-outline-primary">重复</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-danger">清除历史记录</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 所有货币模态框 -->
    <div class="modal fade" id="allCurrenciesModal" tabindex="-1" aria-labelledby="allCurrenciesModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="allCurrenciesModalLabel">所有可用货币</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" placeholder="搜索货币..." id="currencySearch">
                    </div>
                    <div class="row" id="allCurrenciesList">
                        <!-- 货币列表将通过JavaScript动态生成 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 货币数据
            const currencies = [
                { code: 'CNY', name: '人民币', symbol: '¥', flag: 'cny.png' },
                { code: 'USD', name: '美元', symbol: '$', flag: 'usd.png' },
                { code: 'EUR', name: '欧元', symbol: '€', flag: 'eur.png' },
                { code: 'JPY', name: '日元', symbol: '¥', flag: 'jpy.png' },
                { code: 'GBP', name: '英镑', symbol: '£', flag: 'gbp.png' },
                { code: 'AUD', name: '澳元', symbol: 'A$', flag: 'aud.png' },
                { code: 'CAD', name: '加元', symbol: 'C$', flag: 'cad.png' },
                { code: 'HKD', name: '港币', symbol: 'HK$', flag: 'hkd.png' },
                { code: 'SGD', name: '新加坡元', symbol: 'S$', flag: 'sgd.png' },
                { code: 'CHF', name: '瑞士法郎', symbol: 'Fr', flag: 'chf.png' },
                { code: 'KRW', name: '韩元', symbol: '₩', flag: 'krw.png' },
                { code: 'THB', name: '泰铢', symbol: '฿', flag: 'thb.png' }
            ];
            
            // 获取DOM元素
            const fromAmount = document.getElementById('fromAmount');
            const toAmount = document.getElementById('toAmount');
            const fromCurrencyCode = document.getElementById('fromCurrencyCode');
            const toCurrencyCode = document.getElementById('toCurrencyCode');
            const fromCurrencyName = document.getElementById('fromCurrencyName');
            const toCurrencyName = document.getElementById('toCurrencyName');
            const fromFlag = document.getElementById('fromFlag');
            const toFlag = document.getElementById('toFlag');
            const fromCurrencySymbol = document.getElementById('fromCurrencySymbol');
            const toCurrencySymbol = document.getElementById('toCurrencySymbol');
            const rateInfo = document.getElementById('rateInfo');
            const swapBtn = document.getElementById('swapBtn');
            const refreshRateBtn = document.getElementById('refreshRateBtn');
            const historyBtn = document.getElementById('historyBtn');
            // 替换计算覆盖层为内联指示器
            const calculationIndicator = document.getElementById('calculationIndicator');
            
            // 模拟汇率转换
            function convertCurrency() {
                // 显示计算中效果 - 使用内联指示器
                calculationIndicator.classList.add('active');
                // 添加计算中效果到结果输入框
                toAmount.classList.add('calculating');
                
                // 模拟API延迟
                setTimeout(() => {
                    const fromCurrency = fromCurrencyCode.textContent;
                    const toCurrency = toCurrencyCode.textContent;
                    const amount = parseFloat(fromAmount.value);
                    
                    // 模拟汇率数据 (实际应用中应从API获取)
                    const rates = {
                        'CNY': { 'USD': 0.1439, 'EUR': 0.1328, 'JPY': 20.54, 'GBP': 0.1132 },
                        'USD': { 'CNY': 6.95, 'EUR': 0.92, 'JPY': 142.8, 'GBP': 0.79 },
                        'EUR': { 'CNY': 7.53, 'USD': 1.08, 'JPY': 154.7, 'GBP': 0.85 },
                        'JPY': { 'CNY': 0.049, 'USD': 0.007, 'EUR': 0.0065, 'GBP': 0.0055 },
                        'GBP': { 'CNY': 8.83, 'USD': 1.27, 'EUR': 1.17, 'JPY': 181.2 }
                    };
                    
                    let rate;
                    if (fromCurrency === toCurrency) {
                        rate = 1;
                    } else if (rates[fromCurrency] && rates[fromCurrency][toCurrency]) {
                        rate = rates[fromCurrency][toCurrency];
                    } else {
                        // 如果没有直接汇率，使用USD作为中间货币
                        const toUSD = rates[fromCurrency]['USD'] || (1 / rates['USD'][fromCurrency]);
                        const fromUSD = rates['USD'][toCurrency] || (1 / rates[toCurrency]['USD']);
                        rate = toUSD * fromUSD;
                    }
                    
                    // 更新结果
                    const result = (amount * rate).toFixed(2);
                    toAmount.value = result;
                    
                    // 更新汇率信息
                    rateInfo.textContent = `1 ${fromCurrency} = ${rate.toFixed(4)} ${toCurrency}`;
                    
                    // 隐藏计算中效果
                    calculationIndicator.classList.remove('active');
                    toAmount.classList.remove('calculating');
                }, 800); // 模拟0.8秒的API延迟
            }
            
            // 初始转换
            convertCurrency();
            
            // 输入金额变化时转换
            fromAmount.addEventListener('input', function() {
                convertCurrency();
            });
            
            // 交换货币
            swapBtn.addEventListener('click', function() {
                // 交换代码和名称
                const tempCode = fromCurrencyCode.textContent;
                const tempName = fromCurrencyName.textContent;
                const tempFlag = fromFlag.src;
                const tempSymbol = fromCurrencySymbol.textContent;
                
                fromCurrencyCode.textContent = toCurrencyCode.textContent;
                fromCurrencyName.textContent = toCurrencyName.textContent;
                fromFlag.src = toFlag.src;
                fromCurrencySymbol.textContent = toCurrencySymbol.textContent;
                
                toCurrencyCode.textContent = tempCode;
                toCurrencyName.textContent = tempName;
                toFlag.src = tempFlag;
                toCurrencySymbol.textContent = tempSymbol;
                
                // 交换金额
                const tempAmount = fromAmount.value;
                fromAmount.value = toAmount.value;
                
                // 重新计算
                convertCurrency();
            });
            
            // 刷新汇率
            refreshRateBtn.addEventListener('click', function() {
                convertCurrency();
            });
            
            // 显示历史记录
            historyBtn.addEventListener('click', function() {
                const historyModal = new bootstrap.Modal(document.getElementById('historyModal'));
                historyModal.show();
            });
            
            // 选择货币下拉菜单
            const currencyDropdowns = document.querySelectorAll('.dropdown-item[data-currency]');
            currencyDropdowns.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const currency = this.getAttribute('data-currency');
                    const name = this.getAttribute('data-name');
                    const dropdownButton = this.closest('.dropdown').querySelector('.dropdown-toggle');
                    
                    // 确定是源货币还是目标货币
                    if (dropdownButton.id === 'fromCurrencyDropdown') {
                        fromCurrencyCode.textContent = currency;
                        fromCurrencyName.textContent = name;
                        fromFlag.src = `assets/flags/${currency.toLowerCase()}.png`;
                        
                        // 更新符号
                        const currencyData = currencies.find(c => c.code === currency);
                        if (currencyData) {
                            fromCurrencySymbol.textContent = currencyData.symbol;
                        }
                    } else {
                        toCurrencyCode.textContent = currency;
                        toCurrencyName.textContent = name;
                        toFlag.src = `assets/flags/${currency.toLowerCase()}.png`;
                        
                        // 更新符号
                        const currencyData = currencies.find(c => c.code === currency);
                        if (currencyData) {
                            toCurrencySymbol.textContent = currencyData.symbol;
                        }
                    }
                    
                    // 重新计算
                    convertCurrency();
                });
            });
            
            // 常用货币点击
            const favoriteCurrencies = document.querySelectorAll('.favorite-currency');
            favoriteCurrencies.forEach(item => {
                item.addEventListener('click', function() {
                    const currency = this.getAttribute('data-currency');
                    const name = this.getAttribute('data-name');
                    
                    toCurrencyCode.textContent = currency;
                    toCurrencyName.textContent = name;
                    toFlag.src = `assets/flags/${currency.toLowerCase()}.png`;
                    
                    // 更新符号
                    const currencyData = currencies.find(c => c.code === currency);
                    if (currencyData) {
                        toCurrencySymbol.textContent = currencyData.symbol;
                    }
                    
                    // 重新计算
                    convertCurrency();
                });
            });
            
            // 货币搜索
            const currencySearch = document.getElementById('currencySearch');
            currencySearch.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                const currencyItems = allCurrenciesList.querySelectorAll('.favorite-currency');
                
                currencyItems.forEach(item => {
                    const currency = item.getAttribute('data-currency').toLowerCase();
                    const name = item.getAttribute('data-name').toLowerCase();
                    const parent = item.closest('.col-md-4');
                    
                    if (currency.includes(searchTerm) || name.includes(searchTerm)) {
                        parent.style.display = 'block';
                    } else {
                        parent.style.display = 'none';
                    }
                });
            });
        });
    </script>
</body>
</html>